<template>
	<view class="shop-info-container">
		<block-view padding-top="0">
			<view class="avatar-wrapper">
				<image class="avatar" :src="userStore.userInfo.avatar || '/static/images/logo.png'" mode="aspectFill"></image>
				<view class="right-wrapper">
					<view class="user-info">
						<view class="name">{{ userStore.userInfo.name || '' }}</view>
					</view>
					<view class="right-bottom">
						<view class="pet-auth-filled shop-auth-wrapper" >
							<image class="auth-icon-filled" src="/static/icons/shop-auth.svg" mode=""></image>
							<text>SeeWow认证商户</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="info-item">
				<view class="name">商户名称</view>
				<view class="text">{{ info.name }}</view>
			</view>
			<view class="info-item">
				<view class="name">营业执照号</view>
				<view class="text">{{ info.business_cert_no }}</view>
			</view>
			<!-- 照片 -->
			<view class="info-image">
				<view class="name">营业执照</view>
				<image class="img" :src="info.business_cert_img" mode=""></image>
			</view>
			<view class="info-item">
				<view class="name">联系人</view>
				<view class="text">{{ info.contacts }}</view>
			</view>
			<view class="info-item">
				<view class="name">身份证号</view>
				<view class="text">{{ info.id_card }}</view>
			</view>
			<view class="info-item">
				<view class="name">联系人手机</view>
				<view class="text">{{ info.mobile }}</view>
			</view>
			<view class="info-item">
				<view class="name">银行卡号</view>
				<view class="text">{{ info.bank_no }}</view>
			</view>
			<view class="info-item">
				<view class="name">银行预留手机</view>
				<view class="text">{{ info.bank_mobile }}</view>
			</view>
			<view class="info-item">
				<view class="name">开户银行</view>
				<view class="text">{{ info.bank_name }}</view>
			</view>
			
		</block-view>
	</view>
	<fixed-footer>
		<primary-btn title="更新资料" @btnClick="updateFile()"></primary-btn>
	</fixed-footer>
	
	<modal ref="modal"></modal>
</template>

<script>
	import { useUserStore } from '../../store/userStore';

	export default {
		data() {
			return {
				userStore: useUserStore(),
				info: {}
			}
		},
		onLoad() {
			this.getShopDetail()
		},
		methods: {
			updateFile() {
				this.$refs.modal.show({
					content: '更新资料，您的认证状态和标签都会同步更新，确定要更新认证资料吗？',
					cancelText: '取消',
					confirmText: '确定',
					showCloseIcon: false,
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/mine/shopAuth',
								success: (_res) => {
									_res.eventChannel.emit('modifyShopInfo', this.info)
								}
							})
						}
						
					}
				})
			},
			// 获取商户认证详情
			async getShopDetail() {
				const res = await this.$request.get('api/merchant_cert/detail')
				if (res.code == 200) {
					this.info = res.data
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.shop-info-container {
		padding: 24rpx 30rpx 200rpx;
		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			padding: 40rpx 0;
			border-bottom: 1px solid #E9E9E9;
			
			&:last-child {
				border-bottom: none;
			}
			.name {
				font-size: 30rpx;
				// font-weight: 500;
			}
			.text {
				font-size: 28rpx;
				color: #7B7B7B;
				text-align: right;
			}
		}
		.info-image {
			display: flex;
			flex-direction: column;
			font-size: 30rpx;
			// font-weight: 500;
			padding: 40rpx 0;
			.img {
				width: 208rpx;
				height: 208rpx;
				border-radius: 16rpx;
				margin-top: 32rpx;
			}
		}
	}
	.avatar-wrapper {
		display: flex;
		align-items: center;
		padding-top: 30rpx;
		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background-color: #f6f6f6;
			border: 1px solid #fff;
		}
		.right-wrapper {
			padding-left: 24rpx;
			width: calc(100% - 120rpx);
			
			.right-bottom {
				display: flex;
				align-items: center;
				
				.pet-auth-filled {
					color: #666;
					// width: 212rpx;
					padding: 0 12rpx;
					margin-top: 12rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					height: 52rpx;
					border-radius: 26rpx;
					padding: 0 8rpx;
					background-color: #F9F7F8;
					border: 2rpx solid #EDEDED;
					.auth-icon-filled {
						width: 36rpx;
						height: 36rpx;
						margin-right: 8rpx;
					}
				}
				.shop-auth-wrapper {
					margin-right: 16rpx;
				}
			}
			
		}
		.user-info {
			display: flex;
			align-items: center;
			
			.name {
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}
</style>